<template>
  <div class="mainBody">
    <div class="content">
      <div id="main-box">
        <div id="left-box">
          <div id="left-top-box" class="div-box">
            <el-button class="ca-btn" size="small" @click="selectFh('+')">+</el-button>
            <el-button class="ca-btn" size="small" @click="selectFh('-')">-</el-button>
            <el-button class="ca-btn" size="small" @click="selectFh('*')">*</el-button>
            <el-button class="ca-btn" size="small" @click="selectFh('/')">/</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('1')">1</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('2')">2</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('3')">3</el-button>
            <el-button class="ca-btn" size="small" @click="selectKh('(')">(</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('4')">4</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('5')">5</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('6')">6</el-button>
            <el-button class="ca-btn" size="small" @click="selectKh(')')">)</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('7')">7</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('8')">8</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('9')">9</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('0')">0</el-button>
            <el-button class="ca-btn" size="small" @click="selectKh('√')">√</el-button>
            <div v-if="showDate" style="text-align: center;">
              <el-button @click="changeCycle('3')">{{ $t('上一季') }}</el-button>
              <el-button @click="changeCycle('4')">{{ $t('上一年') }}</el-button>
              <el-button @click="changeCycle('1')">{{ $t('上一期') }}</el-button>
            </div>
          </div>
          <div id="left-btm-box" class="div-box">
            <div class="area-header">
              <span class="area-header-title">{{ $t('指标类别') }}</span>
            </div>
            <div>
              <ul>
                <li class="pcw-key-li" @click="loadKeyDetails('balance_sheet','1')">{{ $t('资产负债') }}</li>
                <li class="pcw-key-li" @click="loadKeyDetails('income_sheet','2')">{{ $t('利润及利润分配') }}</li>
                <li class="pcw-key-li" @click="loadKeyDetails('cash_flow_sheet','3')">{{ $t('现金流量') }}</li>
              </ul>
            </div>
          </div>
        </div>
        <div id="right-box" v-loading="loading" class="div-box">
          <div class="area-header">
            <span class="area-header-title">{{ $t('选择指标') }}</span>
          </div>
          <div>
            <ul v-for="sub in subjects" :key="sub.id">
              <li class="pcw-key-li" @click="selectZb(sub.keyName,sub.keyCode)">{{ sub.keyName }}</li>
            </ul>
          </div>
        </div>
      </div>
      <div>
        <el-col :span="24">
          <el-input v-model="formulaName" readonly :placeholder="$t('配置公式')" style="margin-top: 10px;" />
        </el-col>
      </div>
    </div>
    <div slot="footer" class="dialog-footer" style="text-align: right;margin-top: 20px;">
      <!--保存，保存并启动流程，取消 三个按钮-->
      <el-button @click="cancel">{{ $t("取消") }}</el-button>
      <el-button @click="resetFormula">{{ $t("重置") }}</el-button>
      <el-button v-hasPermi="['company:pcw:edit']" type="primary" @click="confirmData">{{ $t("确定") }}</el-button>
    </div>
  </div>
</template>

<script>
    import { listPcwTempSysSubject } from '@/api/company/pcw/pcwTempSysSubject'
    import { Notification } from 'element-ui'
    export default {
      props: {
        typeId: {
          type: String,
          required: true,
          default: ''
        },
        formula: {
          type: Object,
          required: true
        },
        showDate: {
          type: Boolean,
          default: true
        }
      },
        data() {
            return {
                // 表单参数
                form: {},
                // 遮罩层
                loading: false,
                // 表单校验
                rules: {},
                // 关键指标基础科目
                subjects: {},
                // 查询参数
                queryParams: {
                  belongsTable: '',
                  typeId: this.typeId
                },
                // 指标类型
                zhibiao: '',
                // 公式name
                formulaName: '',
                // 公式code
                formulaCode: '',
                // 区分上一季、上一年
                cycleDate: '',
                // 区别上一公式结尾是数字还是指标还是操作符
                qubie: ''
            }
        },
        watch: {
          formula: {
            handler(newVal) {
              this.resetFormula()
              this.formulaName = newVal.name ? newVal.name : ''
              this.formulaCode = newVal.code ? newVal.code : ''
            },
            deep: true,
            immediate: true
          }
        },
        created() {
        },
        methods: {
            // 表单重置
            reset() {
                this.form = {
                  typeId: this.typeId,
                id: undefined,
                tableType: undefined,
                keyCode: undefined,
                keyName: undefined,
                sort: undefined
                }
                this.resetForm('form')
            },
            // 根据类型获取基础科目详情
            loadKeyDetails(table, zhibiao) {
              this.loading = true
              this.queryParams.belongsTable = table
              this.zhibiao = zhibiao
              listPcwTempSysSubject(this.queryParams).then(res => {
                this.subjects = res.rows
                this.loading = false
              })
            },
            // 选择操作符号
            selectFh(fh) {
              if (this.qubie !== '' && this.qubie !== 'fh' && this.qubie !== 'zkh') {
                this.formulaName += fh
                this.formulaCode += fh
                this.qubie = 'fh'
              } else {
                this.errorMsg()
              }
            },
            // 选择括号
            selectKh(kh) {
              if (kh === '(') {
                // 如果上一次的元素不是左括号并且不是右括号并且不能是指标，反之则公式错误
                if (this.qubie !== 'ykh' && this.qubie !== 'zb' && this.qubie !== 'sz') {
                  this.formulaName += kh
                  this.formulaCode += kh
                  this.qubie = 'zkh'
                } else {
                  this.errorMsg()
                }
              } else if (kh === ')') {
                // 如果上一次的元素不是左括号并且不是右括号并且不是符号，反之则公式错误
                if (this.qubie !== '' && this.qubie !== 'zkh' && this.qubie !== 'fh') {
                  this.formulaName += kh
                  this.formulaCode += kh
                  this.qubie = 'ykh'
                } else {
                  this.errorMsg()
                }
              } else {
                // 到这里选择的是根号 自动添加一个左括号
                this.formulaCode += 'sqrt('
                this.formulaName += kh + '('
                this.qubie = 'zkh'
              }
            },
            // 选择了数字
            selectNum(num) {
              // 如果上一次的元素不是有指标并且不是右括号，反之则公式错误
              if (this.qubie !== 'zb' && this.qubie !== 'ykh') {
                this.formulaName += num
                this.formulaCode += num
                this.qubie = 'sz'
              } else {
                this.errorMsg()
              }
            },
            // 选择了指标
            selectZb(name, code) {
              // 如果上一次的元素不是右括号并且不是数字并且不是指标，反之则公式错误
              if (this.qubie !== 'ykh' && this.qubie !== 'sz' && this.qubie !== 'zb') {
                // 如果没有选择上一年或者上一季度
                if (this.cycleDate === '') {
                  if (this.zhibiao === '1') {
                    this.formulaCode += '#1BS{thisDate.' + code + '}'
                  } else if (this.zhibiao === '2') {
                    this.formulaCode += '#1PL{thisDate.' + code + '}'
                  } else if (this.zhibiao === '3') {
                    this.formulaCode += '#1CF{thisDate.' + code + '}'
                  }
                  this.formulaName += name + this.changeName(this.cycleDate)
                } else {
                  if (this.zhibiao === '1') { // lastDate   上一次;lastYear.BS-20017
                    this.formulaCode += '#1BS{' + this.changeZb(this.cycleDate, code) + '}'
                  } else if (this.zhibiao === '2') { // lastMonth 上一月；
                    this.formulaCode += '#1PL{' + this.changeZb(this.cycleDate, code) + '}'
                  } else if (this.zhibiao === '3') { // lastQuarter上一季；
                    this.formulaCode += '#1CF{' + this.changeZb(this.cycleDate, code) + '}'
                  }
                  this.formulaName += name + this.changeName(this.cycleDate)
                  this.cycleDate = ''
                }
                this.qubie = 'zb'
              } else {
                this.errorMsg()
              }
            },
            // 改变公式code
            changeZb(cycleDate, code) {
              if (cycleDate === '1') {
                return 'lastDate.' + code
              } else if (cycleDate === '2') {
                return 'lastMonth.' + code
              } else if (cycleDate === '3') {
                return 'lastQuarter.' + code
              } else if (cycleDate === '4') {
                return 'lastYear.' + code
              }
            },
            // 改变展示公式名称
            changeName(cycleDate) {
              if (cycleDate === '1') {
                return this.$t('(上一期)')
              } else if (cycleDate === '2') {
                return this.$t('(上一月)')
              } else if (cycleDate === '3') {
                return this.$t('(上一季)')
              } else if (cycleDate === '4') {
                return this.$t('(上一年)')
              } else {
                return this.$t('(本次)')
              }
            },
            // 点击了“上一季”或者是“上一年”
            changeCycle(type) {
              if (this.qubie !== 'zb' || this.formulaName === '') {
                this.cycleDate = type
              }
            },
            // 展示公式错误信息
            errorMsg() {
              Notification.error({
                title: this.$t('此操作会导致公式错误！')
              })
            },
            // 重置按钮
            resetFormula() {
              this.subjects = []
              this.formulaName = ''
              this.formulaCode = ''
              this.cycleDate = ''
              this.qubie = ''
              this.zhibiao = ''
            },
            // 取消按钮
            cancel() {
                this.$parent.$parent.formOpen = false
            },
            // 关闭form页面
            closeForm() {
                // 关闭form页面遮罩层
                this.loading = false
                // 关闭form页面
                this.$parent.$parent.formOpen = false
                // 刷新list页面
                this.$parent.$parent.getList()
            },
            /** 提交按钮 */
            confirmData: function() {
              if (this.formulaName === '') {
                Notification.error({
                  title: this.$t('请选择公式！')
                })
              } else {
                this.$parent.$parent.addFormula(this.formulaName, this.formulaCode)
                this.$parent.$parent.formOpen = false
              }
           }
        }
    }
</script>
